<template>
	<div class="InvitingMembers">
		<div class="classIndex_h">
			<router-link :to="{path: '/class/member/index', query: {id: path}}">班级成员</router-link>
			<strong><i>></i>邀请成员</strong>
		</div>
		<div class="Invite_us">
			<span>
				<img v-if="avatar_path !== ''" :src="BASE_URL + avatar_path">
				<img v-else src="../../../public/images/Group9.png">
			</span>
			<span>
				班主任<i>{{headmaster}}</i>
			</span>
			<span v-if="telphone">
				电话<i>{{telphone}}</i>
			</span>
		</div>
		<!--  -->
		<div class="Invite_sl clear">
			<!--  -->
			<div class="resourceSearch fl">
				<el-input placeholder="用户名" v-model="keyword" @change="getKeyword()" class="input-with-select">
					<el-button slot="append" icon="el-icon-search"></el-button>
				</el-input>
			</div>
		</div>
		<!--  -->
		<div class="Invite_ clear">
			<div class="Invite_l fl">
				<el-scrollbar>
					<el-collapse v-model="activeNames">
						<el-collapse-item title="老师" name="6">
							<ul>
								<li class="selectName clear" v-for="(item, index) in teacherList" :key="index">
									<em>{{index + 1}}. </em>
									<span>{{item.name}}</span>
									<i class="el-icon-circle-plus" @click="addTeacher(item)"></i>
								</li>
								<li class="available" v-if="teacherList.length === 0">暂无相关成员</li>
							</ul>
						</el-collapse-item>
						<el-collapse-item title="学生" name="4">
							<ul>
								<li class="selectName clear" v-for="(item, index) in studentList" :key="index">
									<em>{{index + 1}}. </em>
									<span>{{item.name}}</span>
									<i class="el-icon-circle-plus" @click="addStudent(item)"></i>
								</li>
								<li class="available" v-if="studentList.length === 0">暂无相关成员</li>
							</ul>
						</el-collapse-item>
					</el-collapse>
				</el-scrollbar>
			</div>
			<div class="Invite_r fl">
				<div class="Invite_rh clear">
					<span>用户名</span>
					<span>姓名</span>
					<span>性别</span>
					<!-- <span>所属班级</span> -->
				</div>
				<div class="Invite_rc">
					<el-scrollbar>
						<ul>
							<template v-for="(item, index) in dataList.teacher">
								<li class="Invite_rls clear">
									<span>{{item.number}}</span>
									<span>{{item.name}}</span>
									<span v-if="item.sex == 1">男</span>
									<span v-if="item.sex == 2">女</span>
									<!-- <span>{{item.class}}</span> -->
									<span class="el-icon-remove fr" @click="deleteTeacher(index)"></span>
								</li>
							</template>
							<template v-for="(item, index) in dataList.student">
								<li class="Invite_rls clear">
									<span>{{item.number}}</span>
									<span>{{item.name}}</span>
									<span v-if="item.sex == 1">男</span>
									<span v-if="item.sex == 2">女</span>
									<!-- <span>{{item.class}}</span> -->
									<span class="el-icon-remove fr" @click="deleteStudent(index)"></span>
								</li>
							</template>
						</ul>
					</el-scrollbar>
				</div>
			</div>
		</div>
		<div class="Invite_prompt">
			提示：仅添加已注册的本校成员，包括教师、学生
		</div>
		<div class="buttonCSS">
			<el-button type="primary" plain @click="getBack()">取消</el-button>
			<el-button type="primary" v-if="dataList.teacher.length != 0" @click="Submission">确认邀请</el-button>
			<el-button type="primary" v-else @click="Submission2">确认邀请</el-button>
		</div>
		<!-- 只有老师才有邀请权限 -->
		<!-- 邀请 -->
		<el-dialog title="邀请" :visible.sync="InvitationViews" width="460px" custom-class="alBox" :close-on-click-modal="false">
			<div class="signOut">
				<p class="i_gp">请给以下老师指定岗位:</p>
				<el-form label-width="100px" class="demo-ruleForm">
					<div class="InvitationVal">
						<el-scrollbar>
							<el-form-item :label="item.name" v-for="(item, index) in teacherData" :key="index">
								<el-select filterable v-model="item.jobid" placeholder="指定科目" @change="getJop(index)">
									<el-option v-for="(val, index2) in jobList" :label="val.name" :value="val.id" :key="index2"></el-option>
								</el-select>
							</el-form-item>
						</el-scrollbar>
					</div>
					<el-form-item class="buttonCSS" label-width='0'>
						<el-button @click="resetForm" type="primary" plain>取消</el-button>
						<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
					</el-form-item>
				</el-form>
			</div>
			<!--  -->
		</el-dialog>
	</div>
</template>
<script>
var options = [{
	value: '1',
	label: '老师'
}, {
	value: '2',
	label: '学生'
}, {
	value: '3',
	label: '家长'
}];

export default {
	name: '',
	data() {
		return {
			path: this.$route.query.id,
			headmaster: '',
			telphone: '',
			avatar_path: '',

			teacherList: [],
			studentList: [],
			jobList: [],
			job_count: 0,

			dataList: {
				teacher: [],
				student: []
			},
			teacherData: [],
			orgSubject: [],
			jop: '',

			typeOptions: options, //资源类型
			resourceType: '', //资源类型--val
			resourceSearch3: "", //选择资源--搜索
			activeNames: [],
			InvitationViews: false, //邀请弹框
			keyword: '',
		}
	},
	created() {
		this.getHeadmaster();
		this.getTeacher()
	},
	watch: {
		'changData'(val, newval) {
			this.path = sessionStorage.getItem('classId')
			this.getHeadmaster();
			this.getTeacher()
		}
	},
	computed: {
		changData() {
			return deep_clone(this.$store.state.changData);
		},
	},
	methods: {
		getJop(index) {
			for (var i = 0; i < this.teacherData.length; i++) {
				if (i === index) {
					continue;
				}
				if (this.teacherData[index].jobid === this.teacherData[i].jobid) {
					this.teacherData[index].jobid = '';
					this.$message.warning('岗位不能相同')
				}
			}
		},
		//获取班主任
		getHeadmaster() {
			let success = (res => {
				let data = res.data;
				this.headmaster = data[0].name;
				this.telphone = data[0].telphone;
				this.avatar_path = data[0].avatar_path;
			});
			this.$ajax({
				url: 'api/org/class_something',
				method: 'get',
				params: {
					style: 11,
					classid: this.path,
					role_id: 6,
					data_type: 2
				},
				func: {
					success: success
				}
			})
		},
		getKeyword() {


			if (!is_empty(this.keyword)) {
				this.activeNames = ['6', '4']
			} else {
				this.activeNames = []
			}
			this.getTeacher()
		},
		//获取老师
		getTeacher() {
			let success = (res => {
				let data = res.data;
				this.teacherList = data.teacher_list;
				this.studentList = data.student_list
				this.job_count = data.job_count;
				this.jobList = data.job_list
			});
			this.$ajax({
				url: 'api/org/get_teacher_student',
				method: 'get',
				params: {
					classid: this.path,
					keyword: this.keyword
				},
				func: {
					success: success
				}
			})
		},
		//添加老师
		addTeacher(item) {
			let val = item
			for (var i = 0; i < this.dataList.teacher.length; i++) {
				if (this.dataList.teacher[i].id === item.id) {
					this.$message.warning('你已经添加了这个人了，不能再添加');
					return
				}
			}


			if (this.dataList.teacher.length >= this.job_count) {
				this.$message.warning('老师职位满了，没有更多的空缺职位了');
				return
			}
			this.dataList.teacher.push({
				id: item.id,
				number: item.number,
				name: item.name,
				sex: item.sex,
				jobid: '',
			})
		},
		deleteTeacher(index) {
			this.dataList.teacher.splice(index, 1)
		},
		//添加student
		addStudent(item) {
			let val = item
			for (var i = 0; i < this.dataList.student.length; i++) {
				if (this.dataList.student[i].id === item.id) {
					this.$message.warning('你已经添加了这个人了，不能再添加');
					return
				}
			}

			this.dataList.student.push({
				id: item.id,
				number: item.number,
				name: item.name,
				sex: item.sex,
			})
		},
		deleteStudent(index) {
			this.dataList.student.splice(index, 1)
		},

		//
		Submission() {
			if (this.dataList.teacher.length <= 0 && this.dataList.student.length <= 0) {
				this.$message.warning('列表信息不能为空');
				return
			}

			if (this.dataList.teacher.length !== 0) {
				this.InvitationViews = true
				this.teacherData = this.dataList.teacher;
			}

		},
		Submission2() {
			if (this.dataList.student.length <= 0) {
				this.$message.warning('列表信息不能为空');
				return
			}
			if (this.dataList.student.length !== 0) {

				let success = (res => {
					this.$message.success(res.msg)
					this.getHeadmaster()
					setTimeout(() => {
						this.getBack()
					}, 1000);
				});
				let params = {
					classid: this.path,
					teacherlist: this.dataList.teacher,
					studentlist: this.dataList.student,
				}

				this.$ajax.post('api/org/addusertoclass', params, { func: { success: success } });
			}
		},
		getBack() {
			this.$router.back(-1)
		},
		//邀请表单
		submitForm() {
			for (var i = 0; i < this.teacherData.length; i++) {
				if (this.teacherData[i].jobid === '') {
					this.$message.warning(`第 ${i+1} 个岗位不能为空`)
					return
				}
			}
			let success = (res => {
				this.$message.success(res.msg)
				this.InvitationViews = false
				this.getHeadmaster()
				setTimeout(() => {
					this.getBack()
				}, 1000);

			});
			let params = {
				classid: this.path,
				teacherlist: this.teacherData,
				studentlist: this.dataList.student
			}
			this.$ajax.post('api/org/addusertoclass', params, { func: { success: success } });
		},
		resetForm() {
			this.InvitationViews = false
		},

	}
}
</script>